<template>
	<div class="TpUserNum">
		<router-link to="/TpUserNumAdd">
			<div class="TpUserNum-title">
				+常用入住人
			</div>
		</router-link>
		<yd-cell-group>
			<yd-cell-item v-for="item,key in CheckInList" :key="key" arrow @click.native="GOTpUserNumAdd(item.checkInId)">
				<span slot="left" class="tpunitem-left">
            	<div class="ggicon" @click="ggiconfun($event,item.checkInId)">
            	</div>
            	<div>
            		<p>{{item.checkInName}}</p>
            	<dd>{{item.checkInPhone}}</dd>
            	</div>
            </span>
				<span slot="right"></span>
			</yd-cell-item>
		</yd-cell-group>

		<div class="TpUserNumAdd-submitbtn"><button class="TpUserNumAdd-btn" @click="UserNumAdd()">完成</button></div>
	</div>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	export default {
		name: "ChoiceNum",
		data() {
			return {
				checkInIdlist: []
			}
		},
		computed: {
			...mapGetters([
				'source',
				'CheckInList',
			])
		},
		mounted() {
			this.GetCheckInList()
			this.setuserCheckInList(this.checkInIdlist)
		},
		methods: {
			...mapActions({
				getCheckInList: "getCheckInList",
				setuserCheckInList:"setuserCheckInList"
			}),
			UserNumAdd() {
				this.setuserCheckInList(this.checkInIdlist);
				this.$router.go(-1)
			},
			ggiconfun(e, checkInId) {
				e.cancelBubble = true;
				if(e.currentTarget.className == "ggicon") {
					e.currentTarget.className = "ggiconactive";
					this.checkInIdlist.push(checkInId)
					return
				}
				if(e.currentTarget.className == "ggiconactive") {

					e.currentTarget.className = "ggicon";
					for(var i = 0; i < this.checkInIdlist.length; i++) {
						if(this.checkInIdlist[i] == checkInId) {
							this.checkInIdlist.splice(i, 1);
						}
					}
					return
				}
			},
			GOTpUserNumAdd(checkInId) {
				this.$router.push({
					path: "/TpUserNumAdd",
					query: {
						checkInId: checkInId
					}
				})
			},
			GetCheckInList() {
				let getHiss = JSON.parse(sessionStorage.getItem("userinfo"));
				let ajaxSign = {
					source: this.source, // string 是 ios
					token: getHiss.token // string 是 token
				}
				let ajaxData = api.getAES(ajaxSign);
				api.GetCheckInList(ajaxData)
					.then(res => {
						this.getCheckInList(res.result)
					})
			}
		}
	}
</script>

<style>
	.TpUserNum {
		font-size: .28rem;
		background: #EEECEC;
		padding-top: .26rem;
		box-sizing: border-box;
	}
	
	.tpunitem-left {
		color: #282828;
		display: flex;
		align-items: center;
	}
	
	.ggicon {
		width: .2rem;
		height: .2rem;
		border: 1px solid #282828;
		margin-right: .2rem;
		z-index: 999;
	}
	
	.ggiconactive {
		width: .2rem;
		height: .2rem;
		margin-right: .2rem;
		z-index: 999;
		border: 1px solid #e25051;
		background: url(../assets/img/ggicon.png) no-repeat center;
		background-size: .2rem .2rem;
	}
	
	.TpUserNum-title {
		color: #e25051;
		text-align: center;
		line-height: .94rem;
		margin-bottom: .26rem;
		background: #fff;
	}
	
	.TpUserNum .yd-cell:after {
		display: none !important;
	}
	
	.TpUserNumAdd-submitbtn {
		width: 100%;
		height: 1.01rem;
		text-align: center;
		line-height: 1.01rem;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	
	.TpUserNumAdd-btn {
		width: 6rem;
		height: .7rem;
		border: none;
		background: #E25051;
		color: #fff;
		font-size: .35rem;
		border-radius: .08rem;
	}
</style>